<template>
  <!-- 发票 -->
  <div>
    <el-form ref="form" class="form" label-width="80px">
      <el-form-item style="width: 60%;">
        <el-radio-group v-model="radio">
          <el-radio :label="1">单位</el-radio>
          <el-radio :label="2">个人</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button v-if="radio === 1" type="primary" style="width: 61px; height: 30px;" @click="addMessage">添加</el-button>
        <el-button v-else type="primary" style="width: 61px; height: 30px;" @click="addMessage01">添加</el-button>
      </el-form-item>
      <lb-table
        v-if="radio === 1"
        ref="lbTable"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :total="tableData.total"
        height="200px"
        custom-column
        align="center"
        style="width: 100%;"
      />
      <lb-table
        v-else
        ref="lbTable"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData01.column"
        :data="tableData01.data"
        :total="tableData01.total"
        height="200px"
        custom-column
        align="center"
        style="width: 100%;"
      />
    </el-form>
  </div>
</template>

<script>
  import { customerInvocieDel } from '@/api'

  export default {
    name: 'invoice',
    props: {
      temp: {
        type: Object,
        required: true
      },
      invocie01: {
        type: Array,
        required: true
      },
      invocie02: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        radio: 1,
        query: {
          // invoiceCorp: '',
          // taxRegNumber: '',
          // taxAddress: '',
          // taxPhone: '',
          // taxBank: '',
          // taxAccountNumber: '',
          // isMain: '',
          // email: '',
          // taxCode: '',
          // csmId: '',
          // area: [],
          // csmName: '',
          // csmCode: '',
          // csmType: 1,
          // gasNature: '',
          // csmRgPhone: '',
          // contact: '',
          // orgName: '',
          // csmFloor: 1,
          // unCheckQuality: '',
          // sfzh: '',
          // sfzName: '',
          // sfzAddress: '',
          // cardType: '',
          // cardNo: '',
          // newType: 2,
          // defaultPaymentMethod: 1,
          // newFrom: 8,
          // salesmanName: '',
          // isPickUp: 0,
          // settlementType: 1,
          // createTime: '',
          // contractNumber: '',
          // decimalSpare1: '',
          // intSpare2: '',
          // strSpare1: '',
          // strSpare2: '',
          // strSpare3: '',
          // strSpare4: ''
        },
        query01: {
          invoiceCorp: '',
          taxRegNumber: '',
          taxAddress: '',
          taxPhone: '',
          taxBank: '',
          taxAccountNumber: '',
          isMain: '',
          email: '',
          taxCode: '',
          csmId: ''
        },
        tableData: {
          total: 0,
          column: [
            {
              prop: 'invoiceCorp',
              label: '抬头名称',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input size='mini' value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
            },
            {
              prop: 'taxRegNumber',
              label: '纳税人识别号',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input size='mini' value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
              // width: 110
            },
            {
              prop: 'taxAddress',
              label: '单位地址',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
              // width: 110
            },
            {
              prop: 'taxPhone',
              label: '电话号码',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
              // width: 110
            },
            {
              prop: 'taxBank',
              label: '开户银行',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
            },
            {
              prop: 'taxAccountNumber',
              label: '银行账号',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
            },
            {
              prop: 'isMain',
              label: '默认发票',
              render: (h, { row }) => row.isMain === 1 ? <i class='el-icon-success' style='color: #F56C6C;' /> : <span></span>
            },
            {
              label: '操作',
              align: 'center',
              width: 210,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    {
                    row.isMain === 1
                      ? row._edit ? <span>
                                      <el-link onClick={ () => { this.handleSave(row) } }>保存</el-link>
                                    </span>
                        : <span>
                            <el-link onClick={ () => { this.handleEdit(row) } }>编辑</el-link>
                          </span>
                      : row._edit ? <span>
                                      <el-link onClick={ () => { this.setDefaultInvoice(row) } }>设为默认</el-link>
                                      <el-link onClick={ () => { this.handleSave(row) } }>保存</el-link>
                                    </span>
                        : <span>
                            <el-link onClick={ () => { this.setDefaultInvoice(row) } }>设为默认</el-link>
                            <el-link onClick={ () => { this.handleEdit(row) } }>编辑</el-link>
                          </span>
                    }
                    <el-link size='mini' type='danger' onClick={() => this.del(row, $index)}>注销</el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        },
        tableData01: {
          total: 0,
          column: [
            {
              prop: 'invoiceCorp',
              label: '抬头名称',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
            },
            {
              prop: 'taxPhone',
              label: '电话号码',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
              // width: 110
            },
            {
              prop: 'email',
              label: '邮箱',
              render: (h, { row, $index, column }) => {
                return (
                <div>
                  {
                    row._edit
                      ? <el-input value={ row[column.property] } onInput={ (val) => { row[column.property] = val } }></el-input>
                      : <span>{ row[column.property] }</span>
                  }
                </div>
              )
              }
            },
            {
              prop: 'isMain',
              label: '默认发票',
              render: (h, { row }) => row.isMain === 1 ? <i class='el-icon-success' style='color: #F56C6C;' /> : <span></span>
            },
            {
              label: '操作',
              align: 'center',
              width: 210,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    {
                    row.isMain === 1
                      ? row._edit ? <span>
                                      <el-link onClick={ () => { this.handleSave01(row) } }>保存</el-link>
                                    </span>
                        : <span>
                            <el-link onClick={ () => { this.handleEdit(row) } }>编辑</el-link>
                          </span>
                      : row._edit ? <span>
                                      <el-link onClick={ () => { this.setDefaultInvoice01(row) } }>设为默认</el-link>
                                      <el-link onClick={ () => { this.handleSave01(row) } }>保存</el-link>
                                    </span>
                        : <span>
                            <el-link onClick={ () => { this.setDefaultInvoice01(row) } }>设为默认</el-link>
                            <el-link onClick={ () => { this.handleEdit(row) } }>编辑</el-link>
                          </span>
                    }
                    <el-link size='mini' type='danger' onClick={() => this.del01(row, $index)}>注销</el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    mounted() {
      this.tableData.data = this.invocie01
      // console.log(this.invocie01, 'this.invocie01')
      this.tableData01.data = this.invocie02
      this.temp.invoiceItems = this.tableData.data.concat(this.tableData01.data)
    },
    methods: {
      // 设置默认
      setDefaultInvoice(row) {
        this.tableData.data.forEach(item => {
          item.isMain = 2
        })
        row.isMain = 1
      },
      setDefaultInvoice01(row) {
        this.tableData01.data.forEach(item => {
          item.isMain = 2
        })
        row.isMain = 1
      },
      handleEdit(row, $index) {
        this.$set(row, '_edit', true)
      },
      handleSave(row, $index) {
        this.$set(row, '_edit', false)
        this.$set(this.tableData.data, $index, JSON.parse(JSON.stringify(row)))
      },
      handleSave01(row, $index) {
        this.$set(row, '_edit', false)
        this.$set(this.tableData01.data, $index, JSON.parse(JSON.stringify(row)))
      },
      del(row, index) {
        this.$confirm('确认要删除吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.tableData.data.splice(index, 1)
          if (row.csmId) {
            const code = {
              csmId: row.csmId,
              taxCode: row.taxCode
            }
            const res = await customerInvocieDel(code)
            if (res.success) {
              this.$message({
                type: 'success',
                message: '成功!'
              })
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      del01(row, index) {
        this.$confirm('确认要删除吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.tableData01.data.splice(index, 1)
          this.$message({
            type: 'success',
            message: '成功!'
          })
          const code = {
            csmId: row.csmId,
            taxCode: row.taxCode
          }
          const res = await customerInvocieDel(code)
          console.log(res)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 添加信息
      addMessage() {
        // this.query.taxCode = new Date().getTime().toString()
        // this.query.csmId = this.invocie01[0].csmId
        console.log(this.query)
        const param = {
          invoiceCorp: '',
          isMain: this.tableData.data.length === 0 ? 1 : 0,
          op: 0,
          taxAccountNumber: '',
          taxAddress: '',
          taxBank: '',
          taxCode: '',
          taxPhone: '',
          taxRegNumber: '',
          taxType: 1
        }
        this.tableData.data.push(param)
        // this.$set(this.tableData.data, this.tableData.data.$index, JSON.parse(JSON.stringify(this.query)))
      },
      addMessage01() {
        // this.query01.taxCode = new Date().getTime().toString()
        // this.query01.csmId = this.invocie02[0].csmId
        const param = {
          invoiceCorp: '',
          isMain: this.tableData01.data.length === 0 ? 1 : 0,
          op: 0,
          taxCode: '',
          taxPhone: '',
          taxType: 2,
          email: ''
        }
        this.tableData01.data.push(param)
        // this.tableData01.data.push({ ...this.query01 })
        // this.$set(this.tableData01.data, this.tableData01.data.$index, JSON.parse(JSON.stringify(this.query01)))
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
